;(function(){

let arr=[
    {
        checked:true,
        img:'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
        p:'大师监制龙泉青瓷茶叶罐',
        span:'规格:小号 ',
        many:139,
        num:1
    },
    {
        checked:true,
        img:'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg',
        p:'智能温控细嘴流速刚刚好咖啡手冲壶电热水壶',
        span:'规格:黑色600ml ',
        many:398,
        num:1
    },
    {
        checked:true,
        img:'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        p:'古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        span:'规格:珍藏套组(1壶4杯1托盘)+温酒器 ',
        many:1888,
        num:1
    }

]
function show(){
    document.querySelector('.chosen').innerHTML=arr.map(
        (item,index)=>`
        <tr data-index="${index}">
          <td><input type="checkbox" ${item.checked?"checked":""}name="check" class="ck" checked /></td>
          <td>
           <div class="img">
            <a href="">
              <img src=${item.img} alt="" />
            </a>
            <div>
              <p>${item.p}</p>
          
              <span>${item.span}<i class="iconfont icon-jiantou_liebiaozhankai_o"></i></span>
        
           </div>
          </td>
          <td><p class='price'>￥${item.many}</p></td>
          <td>
            <div class="num">
             <div>-</div>
             <div class='number'>${item.num}</div>
             <div>+</div>
            </div>
          </td>
          <td class='itemTotal'>￥${item.many*item.num}</td>
          <td>
            <div class="deletion">
              <p>移入收藏夹</p>
              <p class="remove">删除</p>
              <p>找相似</p>
            </div>
          </td>
        </tr>     
        `
    ).join('')
}
show()

const input=document.querySelector('.table input')
const cks=document.querySelectorAll('.chosen .ck')
const check=document.querySelector('.anniu')

check.addEventListener('click',()=>{
    for(let i=0;i<cks.length;i++){
        cks[i].checked=check.checked
       } 
      getTotal()
    })
input.addEventListener('click',()=>{  
   for(let i=0;i<cks.length;i++){
    cks[i].checked=input.checked
   } 
   
})
for(let i=0;i<cks.length;i++){
    cks[i].addEventListener('click',()=>{
        const temp=document.querySelectorAll('.ck:checked')
      if(cks.length===temp.length){
        input.checked=true
      }else{
        input.checked=false
      }
    })
}
const de=document.querySelector('.center .delete')
const tr=document.querySelectorAll('.chosen tr')
const don=document.querySelector('.mask')
const box=document.querySelector('.box')
const remove=document.querySelectorAll('.chosen .remove')
const btn=document.querySelector('.mask .botton button:last-child')
const bot=document.querySelector('.mask .botton button:first-child')
for(let i=0;i<tr.length;i++){
    de.addEventListener('click',()=>{
        const h4=document.querySelector('.mask .next')
        h4.innerHTML='亲，您是否确认删除商品'
        don.style.display='block'
        box.style.display='block'
        btn.addEventListener('click',()=>{
            tr[i].remove()
            showEmpty();
            getTotal()
        })
    })
}


btn.addEventListener('click',()=>{
    don.style.display='none'
    box.style.display='none' 
    
})    
bot.addEventListener('click',()=>{
   don.style.display='none'
   box.style.display='none'
})

for(let i=0;i<tr.length;i++){
    remove[i].addEventListener('click',()=>{
        delIndex = i;
        const h4=document.querySelector('.mask .next')
        h4.innerHTML='亲，您是否确认删除商品'
        don.style.display='block'
        box.style.display='block'
       
    })    
}
btn.addEventListener('click',()=>{
    
    don.style.display='none'
    box.style.display='none' 
    if(don.style.display='none'){
        //删除tr
        tr[delIndex].remove()
        showEmpty()
        getTotal()
    }  
}) 
const reduce=document.querySelectorAll('.chosen .num div:first-child')
const add=document.querySelectorAll('.chosen .num div:last-child')
const num=document.querySelectorAll('.number')

for(let i=0;i<add.length;i++){
    add[i].addEventListener('click',()=>{
        let tr = add[i].parentNode.parentNode.parentNode
        tr.querySelector('.number').innerHTML++
        //总计   ￥128
        tr.querySelector('.itemTotal').innerHTML = "￥"  + num[i].innerHTML * tr.querySelector('.price').innerHTML.slice(1)
        
        getTotal()
    })
    reduce[i].addEventListener('click',()=>{
        let tr = reduce[i].parentNode.parentNode.parentNode
        tr.querySelector('.number').innerHTML--
        tr.querySelector('.number').innerHTML =  tr.querySelector('.number').innerHTML< 1 ? 1 : tr.querySelector('.number').innerHTML
        tr.querySelector('.itemTotal').innerHTML ="￥"  + tr.querySelector('.number').innerHTML * tr.querySelector('.price').innerHTML.slice(1)
        getTotal()
    })
  
}
const chosen=document.querySelector('.chosen')

const vacant=document.querySelector('.vacant')
if(chosen.innerHTML===''){
    chosen.style.display='none'
    vacant.style.display='block'
}

function showEmpty(){
    if(!document.querySelector('tbody').children.length){
        vacant.style.display = 'block'
    }
    

}
showEmpty();

function getTotal(){
    let ipts=[...document.querySelectorAll('.chosen input:checked')];
    let resObj=ipts.reduce((prev,item)=>{
        const tr=item.parentNode.parentNode
        prev.totalSum += +tr.querySelector('.itemTotal').innerHTML.slice(1)
        prev.totalNum += +tr.querySelector('.number').innerHTML
        return prev
    },{
        totalNum:0,
        totalSum:0,
    })
    document.querySelector('.center .right li:nth-child(4)').innerHTML=`￥${resObj.totalSum}`
    document.querySelector('.center .right li:nth-child(2)').innerHTML=`已选择${resObj.totalNum}件、`
    document.querySelector('.center .right li:first-child').innerHTML=`共${resObj.totalNum}件商品、`
} 
 
 getTotal()
}())

